<template>
  <div>
    <!-- <van-nav-bar fixed placeholder title="项目概况" left-arrow @click-left="onClickLeft" /> -->
    <view class="nav-style">
      <view :style="{ height: statusBarHeight + 'px' }" />
      <view class="nav-main" :style="{ height: navbarHeight + 'px' }">
        <slot name="left">
          <view class="left" :style="{ 'margin-top': navbarHeight / 2 + 'px' }">
            <image
              class="btn-icon"
              :src="require('@/static/project/back.png')"
              mode="scaleToFill"
              @click="back"
            />
            <view class="line" />
            <image
              class="btn-icon"
              :src="require('@/static/project/home.png')"
              mode="scaleToFill"
              @click="backHome"
            />
          </view>
          <view class="page-title">
            <span>项目概况</span>
          </view>
        </slot>
      </view>
      <view>
        <van-divider />
      </view>
    </view>
    <div
      :style="{
        'margin-top': statusBarHeight + navbarHeight + 30 + 'px',
        'padding-bottom': 4 + 'px',
      }"
    >
      <div class="overProj">
        <div>
          <span>{{ data.projectName }}</span>
        </div>
      </div>
    </div>
    <van-tabs
      wrap-class="vant-tabs"
      :active="active"
      title-active-color="#739ECA"
      title-inactive-color="#666"
      color="#739ECA"
      line-width="16px"
      line-height="2px"
      @change="onChange"
    >
      <swiper
        class="swiper"
        :current="current"
        :style="{ height: swiperHeight + 'px', 'overflow-y': 'auto' }"
        @change="changeSwiper"
      >
        <swiper-item>
          <van-tab title="概况">
            <project-overview class="project-overview" :info-data="data" />
          </van-tab>
        </swiper-item>
        <swiper-item>
          <van-tab title="研发需求">
            <project-demand ref="projectDemend" :info-data="data" :num="num" @getDelDialog="getDelDialog" />
          </van-tab>
        </swiper-item>
        <!-- <swiper-item>
          <van-tab title="研发任务">
            <project-iteration ref="lcRefChild" />
          </van-tab>
        </swiper-item> -->
      </swiper>
    </van-tabs>
    <uni-popup ref="deleteDialog" class="unipop" type="dialog">
      <uni-popup-dialog type="info" cancel-text="取消" confirm-text="确定" title="系统提示" content="从操作将永久删除" @confirm="deleteDemands" />
    </uni-popup>
  </div>
</template>

<script>
import projectOverview from './project-overview.vue'
import projectDemand from './project-demand.vue'
import projectIteration from './project-iteration.vue'
import { getDeviceInfo } from '@/utils/storage'
import { sleep } from '@/utils/common'
import { deleteDemend } from '@/apis/project'

export default {
  components: {
    projectOverview,
    projectDemand,
    projectIteration,
  },
  props: {
    // eslint-disable-next-line vue/require-valid-default-prop
    data: {
      type: Object,
    },
  },
  data() {
    return {
      statusBarHeight: '0',
      navbarHeight: '0',
      swiperHeight: 0,
      active: 0,
      activeTest: 0,
      current: 0,
      project: '',
      range: [
        { value: 0, text: '市政信息升级管理平台' },
        { value: 1, text: '五图河APP' },
        { value: 2, text: '中恩OA系统' },
      ],
      showAdd: false,
      projectBtn: 0,
      pageTitle: '',
      projectId: '',
      demandId: '',
    }
  },
  created() {
    this.setHeight()
  },
  mounted() {
    this.projectId = this.data.id
    uni.$emit('XMGS', this.data)
  },
  methods: {
    // 设置高度
    setHeight() {
      const { screenHeight, statusBarHeight, navbarHeight } = getDeviceInfo()
      this.statusBarHeight = statusBarHeight
      this.navbarHeight = navbarHeight
      this.swiperHeight = screenHeight - statusBarHeight - navbarHeight - 142
    },
    // 重新调用里程列表
    getLiChengList() {
      this.$refs.lcRefChild.getLiChengList()
    },
    addProject() {
      if (this.projectBtn === 1) {
        uni.navigateTo({
          url: `/pages/index/tabs/overview/iteration?projectId=${this.projectId}`,
        })
      }
    },
    change(val) {

    },
    // 滑块滑动触发
    changeSwiper(val) {
      this.active = val.detail.current
    },
    // tab切换触发
    onChangeTest(val) {
      this.current = val.detail.index
    },
    onChange(value) {
      this.current = value.detail.index
      this.projectBtn = value.detail.name
      if (value.detail.name === 1) {
        this.showAdd = true
      } else if (value.detail.name === 2) {
        this.showAdd = false
        uni.$emit('XMLC', this.projectId)
      } else {
        this.showAdd = false
      }
    },
    onClickLeft() {
      uni.navigateBack()// 直接使用 navigateBack
    },
    // 返回上一级
    back() {
      uni.$off('XMGS')
      uni.switchTab({
        url: '/pages/project/index/index',
      })
    },
    // 返回主页
    backHome() {
      uni.$off('XMGS')
      uni.switchTab({
        url: '/pages/office/index/index',
      })
    },
    getDelDialog(id) {
      this.$refs.deleteDialog.open()
      this.demandId = id
    },
    async deleteDemands() {
      uni.showLoading({
        title: '删除中',
      })
      if (this.demandId) {
        const res = await deleteDemend(this.demandId)
        await sleep(1000)
        uni.showToast({
          title: '删除成功',
          duration: 2000,
        })
        this.$refs.projectDemend.getProjectRequire()
      }
      uni.hideLoading()
    },
  },
}
</script>

<style lang="scss" scoped>
	.nav-style{
		position: fixed;
		top: 0px;
		background-color: #fff;
		width: 100%;
		left: 0px;
		z-index: 10;
	}
::v-deep .swiper {
  // height: 920px;
  // overflow-y: auto;
}
.nav-main {
  .left {
    height: 32px;
    padding: 0 26rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 24rpx;
    // top: 50%;
    transform: translateY(-50%);
    border-radius: 32rpx;
    // border: 1px solid #e7ebee;

    .btn-icon {
      width: 48rpx;
      height: 48rpx;
    }

    .line {
      width: 2rpx;
      height: 18px;
      margin: 0 14rpx;
      background: #e7ebee;
    }
  }
  .page-title {
    text-align: center;
    height: 40px;
    line-height: 41px;
    font-weight: 500;
  }

  .title {
    font-size: 32rpx;
    font-weight: 500;
    color: #000000;
  }
}
.over-project {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 98%;
  margin: 0 auto;
  // margin-top: 140px;
  .over-select {
    width: 80px;
  }
  .over-img {
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.overProj {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 16px;
  height: 28px;
  span {
    font-weight: 550;
  }
  .over-img {
    img {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
<style lang="scss">
.vant-tabs {
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06) !important;
}
</style>
